<template>
    <div class="error-page">
        <van-row class="wrapper">
            <van-row class="error-img-box">
                <img :src="errorImage" />
            </van-row>
            <van-row class="text msg-title">{{ errorMessage }}</van-row>
            <van-row class="text msg-desc" v-if="errorDescription !== ''">{{ errorDescription }}</van-row>
            <van-row class="button-group" v-if="showBackHomeButton || showRefreshButton">
                <van-col span="12" class="back-button" v-if="showRefreshButton">
                    <router-link to="/">返回首页</router-link>
                </van-col>
                <van-col span="12" class="refresh-button" v-if="showRefreshButton">
                    <router-link to="" @click.native="$router.go(0)" replace>刷新页面</router-link>
                </van-col>
            </van-row>
        </van-row>
    </div>
</template>

<script>
export default {
    name: 'errorTips',
    props: {
        errorImage: {
            type: String,
            default: require('assets/img/error/no-found.png'),
        },
        errorMessage: {
            type: String,
            default: 'SORRY！发生错误了，请点击按钮返回首页或刷新页面'
        },
        errorDescription: {
            type: String,
            default: ''
        },
        showBackHomeButton: {
            type: Boolean,
            default: false
        },
        showRefreshButton: {
            type: Boolean,
            default: false
        },
    },
    data () {
        return {
            
        }
    },
    created () {
        
    },
}
</script>

<style lang="scss" scoped>
.error-page {
    .wrapper {
        padding-top: 1.2rem;
        width: 4.6rem;
        max-width: 400px;
        margin: 0 auto;
    }
    .error-img-box {
        padding: 0 .4rem;
        margin-bottom: 30px;
        img {
            width: 100%;
        }
    }
    .msg-title {
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 20px;
        color: #333;
    }
    .msg-desc {
        font-size: 14px;
        color: #808080;
    }
}
</style>